<da-layout-row [daGutter]="[24, 24]">
  <da-col-item [daSpan]="24" [daXs]="24">
    <div class="da-form">
      <form dForm [layout]="columnsLayout" autocomplete="off">
        <div class="grid">
          <da-layout-col [daGutter]="[0, 0]" [daSpan]="24">
            <da-row-item>
              <da-layout-row [daGutter]="[0, 0]">
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label [required]="true">First Name</d-form-label>
                      <d-form-control class="form-control-width">
                        <input dTextInput name="userName" />
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label [required]="true">Last Name</d-form-label>
                      <d-form-control class="form-control-width">
                        <input dTextInput name="userName" />
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label [required]="true">Email</d-form-label>
                      <d-form-control class="form-control-width">
                        <input dTextInput name="email" />
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
              </da-layout-row>
            </da-row-item>

            <da-row-item>
              <da-layout-row [daGutter]="[0, 0]">
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label [required]="true">Team</d-form-label>
                      <d-form-control class="form-control-width">
                        <d-select
                          [options]="selectOptions"
                          name="select1"
                          [filterKey]="'label'"
                          [(ngModel)]="formData.selectValue"
                        ></d-select>
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label [required]="true">Roles</d-form-label>
                      <d-form-control class="form-control-width">
                        <d-select
                          name="multiSelect"
                          [options]="selectOptions2"
                          [filterKey]="'label'"
                          [isSearch]="true"
                          [multiple]="true"
                          [extraConfig]="{
                            labelization: multipleSelectConfig.labelization
                          }"
                          [ngModel]="formData.multipleSelectValue"
                        ></d-select>
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>Labels</d-form-label>
                      <d-form-control class="form-control-width">
                        <d-tags-input
                          name="tag"
                          (click)="$event.stopPropagation()"
                          [displayProperty]="'label'"
                          [tags]="addedLabelList"
                          [placeholder]="'Add a tag'"
                          [suggestionList]="labelList"
                        >
                        </d-tags-input>
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
              </da-layout-row>
            </da-row-item>

            <da-row-item>
              <da-layout-row [daGutter]="[0, 0]">
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>Duty day</d-form-label>
                      <d-form-control class="form-control-width">
                        <div
                          class="single-checkbox"
                          *ngFor="let option of checkboxOptions"
                        >
                          <d-checkbox
                            name="runDay"
                            [label]="option.label"
                            [isShowTitle]="false"
                            [ngModel]="option.checked"
                          ></d-checkbox>
                        </div>
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
                <da-col-item [daXs]="8" [daMs]="24">
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>Disclosure</d-form-label>
                      <d-form-control class="form-control-width">
                        <d-radio-group
                          name="schedule"
                          [cssStyle]="'column'"
                          [(ngModel)]="formData.radioValue"
                        >
                          <d-radio
                            *ngFor="let option of radioOptions"
                            [name]="'schedule'"
                            [value]="option.id"
                          >
                            {{ option.label }}
                          </d-radio>
                        </d-radio-group>
                      </d-form-control>
                    </d-form-item>
                  </div>
                </da-col-item>
              </da-layout-row>
            </da-row-item>
          </da-layout-col>
        </div>
        <d-form-operation>
          <d-button
            bsStyle="primary"
            class="mr-element-spacing"
            circled="true"
            style="margin-right: 4px !important"
            >Submit</d-button
          >
          <d-button bsStyle="common" circled="true">Cancel</d-button>
        </d-form-operation>
      </form>
    </div>
  </da-col-item>
</da-layout-row>
